<template>
  <div class="min-h serveProject bg-wt">
    <!-- 搜索框 -->
    <SearchFrom
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="handleSearch"
    ></SearchFrom>
    
    <TableList
      :data="data"
      :total="total"
      :pagination="pagination"
      :dataLoading="dataLoading"
      @onChange="onChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
      @handleClickDelete="handleClickDelete"
      @handleForbidden="handleForbidden"
    >
    </TableList>

     <!-- 禁用弹层 -->
     <Forbidden
      :visible="dialogVisible"
      :text="operateText"
      @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"
    ></Forbidden>
    
    <!-- 删除弹层 -->
    <Delete
      :visible="dialogDeleteVisible"
      :delete-text="operateText"
      @handle-delete="handleDelete"
      @handle-close="handleDeleteClose"
    ></Delete>
    <!-- 弹窗 -->
    <DialogFrom
    ref="formRef"
    :visible="visible"
    :title="title"
    :data="formBaseData"
    @handleEdit2="handleEdit2"
    @handleClose="handleClose"
    @handle-add="handleAdd"
    >
  </DialogFrom>
  </div>
  
</template>

<script setup lang="jsx">
import { ref,onMounted } from 'vue';
import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
import { COLUMNS } from './constants';
import { MessagePlugin } from 'tdesign-vue-next';
import TableList from './components/TableList.vue'
import SearchFrom from './components/SearchFrom.vue'
import DialogFrom  from './components/DialogFrom.vue'
import Delete from '@/components/OperateDialog/index.vue'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'
import { getProjectList,projectAdd,getProjectDetails,projectUpdate,projectDelete,projectStatus  } from '@/api/serve'
const pagination = ref({
  pageSize: 10,
  pageNum: 1
});
//定义列表数据格式
var data = ref([])
var total = ref(0)
const dataLoading = ref(false) // 加载中
const formBaseData = ref({}) // 弹窗表单内容
const title = ref('') // 弹窗标题
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const operateText = ref('护理项目') // 要操作的内容提示
const typeId = ref('') // 设置删除id
const dialogVisible = ref(false);
const typeStatus = ref(null) // 禁用启用
const statusText = ref('') // 启用禁用提示
//确定禁用
const handleForbiddenSub = async () =>{
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList()
  }
}

// 禁用弹窗
const handleForbidden = (val) => {
    console.log(val.id);
    console.log(val.status);
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
    console.log(dialogVisible.value);
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}

// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}
//删除方法
// 确认删除
const handleDelete = async () => {
  const res= await projectDelete(typeId.value)
  if (res.code === 200) {
    dialogDeleteVisible.value = false
    MessagePlugin.success('删除成功')
    getList()
  }
}
// 点击删除
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}
// 关闭删除弹层
const handleDeleteClose = () => {
  dialogDeleteVisible.value = false
}
//是否显示弹窗
var visible = ref(false)


//编辑
const handleEdit = (val) =>{
  // 将弹窗的标题
  title.value = '编辑'
  // 获取详情
  getDetails(val.id)
  console.log(formBaseData.value);
  // 显示弹窗
  visible.value = true
}
//根据id查询项目
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}
//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
}
// 添加
const handleAdd = async (val) => {
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
//编辑提交
const handleEdit2 = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
//搜索组件的方法
const handleClear = (val)=>{
    pagination.value.val = '';
}
const handleReset = (size) => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
};
const handleSearch = () => {
pagination.value.pageNum = 1
  getList()
};
//翻页方法
const onPageSizeChange = (size) => {
  console.log('page-size:', size);
  MessagePlugin.success(`pageSize变化为${size}`);
  pagination.value.pageSize = size;
};


const onCurrentChange = (index, pageInfo) => {
  MessagePlugin.success(`转到第${index}页`);
  console.log(pageInfo);
  pagination.value.pageNum = index;
};
//翻页设置当前页
const onChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
};


// 翻页设置当前页
/* const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
} */

//分页对象


//获取列表数据的异步方法
const getList = async ()=>{
    const res=await  getProjectList(pagination.value)
    data.value=res.data.records
    total.value=(Number)(res.data.total)
}
//加载数据
onMounted(() => {
    getList()
})

//在js代码中添加isDecimals方法，判断当前字段是否包含了小数点
  const isDecimals = (val) => {
    if (String(val).indexOf('.') > -1) {
      return true
    }
    return false
  }
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);

const handleRowClick = (e) => {
  console.log(e);
};

//分页对象

</script>